<template>
    <!-- 用餐台账 -->
    <base-breadcrumb :title="$route.meta.title">
        <a-spin :spinning="loading">
            <a-form-model ref="ruleForm" :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                <a-card :bordered="false">
                    <title-name title="基本信息"></title-name>

                    <a-row :gutter="24">
                        <a-col :md="8" :sm="8">
                            <a-form-model-item label="食堂名称">
                                <BaseInput disabled v-model="canteenName"></BaseInput>
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="8" :sm="8">
                            <a-form-model-item label="考核人">
                                <BaseInput disabled v-model="creatorName"></BaseInput>
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="8" :sm="8">
                            <a-form-model-item label="考核日期">
                                <BaseInput disabled v-model="createTime"></BaseInput>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </a-card>
                <!-- 表格 -->
                <a-card :bordered="false">
                    <title-name title="考核明细"></title-name>

                    <!-- 表格 -->
                    <s-table
                        :bordered="true"
                        ref="table"
                        tableLayout="fixed"
                        size="default"
                        rowKey="key"
                        :columns="columns"
                        :data="loadData"
                        :alert="true"
                        show-size-changer
                        show-quick-jumper
                        :showPagination="false"
                    >
                        <span slot="index" slot-scope="text, record, index">{{
                            form.topics.length != index + 1 ? index + 1 : ''
                        }}</span>
                        <template slot="options" slot-scope="text, record">
                            <a-row :gutter="24">
                                <a-col :md="24" :sm="24" v-for="i in record.options" :key="i.id">
                                    <a-checkbox disabled :checked="i.choose == 1 ? true : false">{{
                                        i.optionsName
                                    }}</a-checkbox>
                                </a-col>
                            </a-row>
                        </template>
                    </s-table>
                    <a-row :gutter="24" class="mt20">
                        <a-col :md="24" :sm="24">
                            <a-form-model-item label="照片">
                                <span v-if="!form.fileInfoVOS || form.fileInfoVOS.length < 1">
                                    <empty description="暂未上传照片"></empty>
                                </span>
                                <upload-list
                                    v-else
                                    :businessCode="'OF13'"
                                    uploadType="image"
                                    :editModel="0"
                                    :uploadArrys.sync="form.fileInfoVOS"
                                    multiple
                                ></upload-list>
                                <span>暂无</span>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </a-card>
            </a-form-model>
        </a-spin>
        <div class="tool-btns mb20 page-btn-right-top">
            <a-button class="ml20" type="primary" @click="handleClose">关闭</a-button>
        </div>
    </base-breadcrumb>
</template>

<script>
import { STable } from '@/components' // 表格
import { getOfficeCanteenAssessmentById } from '@/api/office/canteen' // api
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import UploadList from '@/components/UploadList'
const columns = [
    {
        title: '序号',
        width: 80,
        dataIndex: 'index',
        scopedSlots: { customRender: 'index' },
    },
    {
        title: '检查项-大类',
        dataIndex: 'topicName',
        width: '30%',
    },
    {
        title: '检查项-小类',
        ellipsis: true,
        dataIndex: 'options',
        width: '50%',
        scopedSlots: { customRender: 'options' },
    },
    {
        title: '分值计算规则',
        ellipsis: true,
        width: '10%',
        dataIndex: 'calScore',
    },
    {
        title: '得分',
        ellipsis: true,
        width: '10%',
        dataIndex: 'optionsScore',
    },
]

export default {
    extends: new BaseEditPage(),
    components: {
        STable,
        UploadList,
    },
    data() {
        this.columns = columns

        return {
            loading: false,

            loadData: () => {
                return new Promise((resolve, reject) => {
                    resolve({
                        data: this.form.topics,
                    })
                })
            },
            editModel: 0,
            form: { topics: [] },
        }
    },
    mounted() {
        this.getOfficeCanteenAssessmentById()
    },

    methods: {
        getOfficeCanteenAssessmentById() {
            this.loading = true
            getOfficeCanteenAssessmentById({ id: this.id }).then((res) => {
                this.loading = false
                console.log(res)
                this.form = res.data
                this.form.fileInfoVOS = this.form.fileInfoVOS || []
                this.form.topics?.push({ id: '1', topicName: '总分', optionsScore: this.form.totalScore })
                this.$refs.table?.refresh(true)
            })
        },
        handleClose() {
            this.$multiTab.close(this.$route.fullpath)
        },
    },
}
</script>
